<template>
    <div class="container" style="width: 100%; max-width: 800px">
        <div class="radio-group-container">
            <div class="radio-group">
                <t-radio-group v-model="leftFixedColumn" variant="default-filled">
                    <t-radio-button :value="1"> 左侧固定一列 </t-radio-button>
                    <t-radio-button :value="2"> 左侧固定两列 </t-radio-button>
                </t-radio-group>
            </div>

            <div class="radio-group">
                <t-radio-group v-model="rightFixedColumn" variant="default-filled">
                    <t-radio-button :value="1"> 右侧固定一列 </t-radio-button>
                    <t-radio-button :value="2"> 右侧固定两列 </t-radio-button>
                </t-radio-group>
            </div>

            <div class="radio-group">
                <t-radio-group v-model="tableLayout" variant="default-filled">
                    <t-radio-button value="fixed">table-layout: fixed</t-radio-button>
                    <t-radio-button value="auto">table-layout: auto</t-radio-button>
                </t-radio-group>
                <t-checkbox v-model="emptyData" style="margin-left: 16px; vertical-align: middle">空数据</t-checkbox>
            </div>
        </div>

        <t-table ref="tableRef" row-key="index" :data="emptyData ? [] : data" :columns="columns"
            :table-layout="tableLayout" resizable lazy-load size="small" hover :pagination="pagination">
            <!-- 审批状态列：普通字符串 -->
            <template #status="{ row }">
                {{ (statusNameListMap as Record<number, { label: string; theme: string }>)[row.status as number]?.label
                    || '未知状态' }}
            </template>

            <!-- 操作列 -->
            <template #operation="{ row }">
                <t-link theme="primary" hover="color" @click="rehandleClickOp(row)">
                    {{ row.status === 0 ? '查看详情' : '再次申请' }}
                </t-link>
            </template>
        </t-table>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { TableProps, TableInstanceFunctions, TableRowData } from 'tdesign-vue-next';

// 审批状态映射（纯字符串，无图标）
const statusNameListMap = {
    0: { label: '审批通过', theme: 'success' },
    1: { label: '审批失败', theme: 'danger' },
    2: { label: '审批过期', theme: 'warning' },
};

// 静态定态数据（5条）
const data: TableProps['data'] = [
    {
        index: 1,
        applicant: '贾明',
        status: 0,
        channel: '电子签署',
        detail: { email: 'w.cezkdudy@lhll.au' },
        matters: '宣传物料制作费用',
        time: 2,
        createTime: '2022-01-01',
    },
    {
        index: 2,
        applicant: '张三',
        status: 1,
        channel: '纸质签署',
        detail: { email: 'r.nmgw@peurezgn.sl' },
        matters: 'algolia 服务报销',
        time: 3,
        createTime: '2022-02-01',
    },
    {
        index: 3,
        applicant: '王芳',
        status: 2,
        channel: '纸质签署',
        detail: { email: 'p.cumx@rampblpa.ru' },
        matters: '相关周边制作费',
        time: 1,
        createTime: '2022-03-01',
    },
    {
        index: 4,
        applicant: '贾明',
        status: 0,
        channel: '电子签署',
        detail: { email: 'w.cezkdudy@lhll.au' },
        matters: '激励奖品快递费',
        time: 4,
        createTime: '2022-04-01',
    },
    {
        index: 5,
        applicant: '张三',
        status: 1,
        channel: '纸质签署',
        detail: { email: 'r.nmgw@peurezgn.sl' },
        matters: '宣传物料制作费用',
        time: 2,
        createTime: '2022-05-01',
    },
];

// 响应式状态
const leftFixedColumn = ref(2);
const rightFixedColumn = ref(1);
const tableLayout = ref<TableProps['tableLayout']>('fixed');
const emptyData = ref(false);
const tableRef = ref<TableInstanceFunctions | null>(null);

// 动态列配置
const columns = computed<TableProps['columns']>(() => [
    {
        colKey: 'applicant',
        title: '申请人',
        width: 100,
        fixed: 'left',
    },
    {
        colKey: 'status',
        title: '审批状态',
        width: 150,
        fixed: leftFixedColumn.value >= 2 ? 'left' : undefined,
        // 使用 #status 插槽渲染，此处可不写 render/cell
    },
    {
        colKey: 'detail.email',
        title: '邮箱地址',
        width: 180,
    },
    {
        colKey: 'matters',
        title: '申请事项',
        width: 200,
    },
    {
        colKey: 'createTime',
        title: '申请日期',
        width: 120,
        fixed: rightFixedColumn.value >= 2 ? 'right' : undefined,
    },
    {
        colKey: 'operation',
        title: '操作',
        width: 100,
        fixed: 'right',
    },
]);

const pagination: TableProps['pagination'] = {
    defaultCurrent: 1,
    defaultPageSize: 5,
    total: data.length, // 使用实际数据长度
};
// 操作点击处理
const rehandleClickOp = (row: TableRowData) => {
    console.log('操作行数据:', row);
};

// 可选：横向滚动方法（未在模板中调用，保留供参考）
const scrollToCreateTime = () => {
    tableRef.value?.scrollColumnIntoView?.('matters');
};
</script>

<style scoped>
.container {
    width: 75%;
    margin: 50px auto;
    display: block;
}

.radio-group-container {
    display: block;
    margin: 10px;

    .radio-group {
        display: flex;
        gap: 10px;
        margin: 10px 0;
    }
}
</style>